<template>
  <view class="viewpoint" :style="{ paddingTop: safeAreaInsets!.top + 'px'}">
    <view class="info" @tap="tosign">
      <image class="avatar" src="../static/images/ystx.png" mode="scaleToFill" /><view
        class="name"
        >{{ MemberStore.profile.doctorInfo.name }}</view
      ></view
    >
    <h2 class="title">安心家医-智慧工作站</h2>
    <view class="title" @tap="tologin">退出</view>
  </view>
  <!-- 普通弹窗 -->
  <uni-popup ref="popup" background-color="#fff">
    <view class="popup-content">
      <scroll-view scroll-y class="Y">
        <view class="avatar">
          <view class="img"><image src="../static/images/ystx.png" mode="scaleToFill" /></view>
        </view>
        <view class="item">
          <text class="label">身份证：</text>
          <view class="input"><input type="text" v-model="userforms.idNumber" disabled /></view>
        </view>
        <view class="item">
          <text class="label">账号:</text>
          <view class="input"
            ><input type="text" v-model="MemberStore.profile.doctorInfo.account" disabled
          /></view>
        </view>
        <view class="item">
          <text class="label">姓名：</text>
          <view class="input"><input type="text" v-model="userforms.name" /></view>
        </view>
        <view class="item">
          <text class="label">电话：</text>
          <view class="input"><input type="text" v-model="userforms.phoneNumber" /></view>
        </view>
        <view class="item">
          <text class="label">性别：</text>
          <view class="input"
            ><radio-group @change="ongenderChange">
              <label class="radio">
                <radio value="男" color="#27ba9b" :checked="userforms.sex === '男'" />
                男
              </label>
              <label class="radio">
                <radio value="女" color="#27ba9b" :checked="userforms.sex === '女'" />
                女
              </label>
            </radio-group></view
          >
        </view>
        <!-- 提交按钮 -->
        <view style="height: 35rpx; width: 100%; display: flex; justify-content: center"
          ><view @tap="summit" class="form-button"><text class="save">保存</text></view></view
        >
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { loginout } from '@/services/login'
import { useMemberStore } from '@/stores/index'
import { modifyAPI } from '@/services/login'
import { ref } from 'vue'
import { login } from '@/services/login'
const MemberStore = useMemberStore()
const { safeAreaInsets } = uni.getSystemInfoSync()
const tologin = async () => {
  await loginout()
  MemberStore.clearProfile()
  uni.navigateTo({ url: '/pages/login/login' })
}
//点击医生签约
const popup = ref()
const tosign = () => {
  popup.value.open('center')
}
const userforms = ref({
  id: MemberStore.profile.doctorInfo.id,
  name: MemberStore.profile.doctorInfo.name,
  sex: MemberStore.profile.doctorInfo.sex,
  age: MemberStore.profile.doctorInfo.age,
  idNumber: MemberStore.profile.doctorInfo.idNumber,
  phoneNumber: MemberStore.profile.doctorInfo.phoneNumber,
})
const summit = async () => {
  const res = await modifyAPI(userforms.value)
  if (res.code == 200) {
    uni.showToast({ icon: 'none', title: '修改成功' })
    Login()
    popup.value.close()
  }
}
const ongenderChange = (ev: any) => {
  userforms.value.sex = ev.detail.value
}
const Login = async () => {
  const res = await login({
    account: MemberStore.profile.doctorInfo.account,
    password: MemberStore.profile.doctorInfo.password,
  })

  //将数据存到本地
  MemberStore.setProfile(res.data)
}
</script>

<style lang="scss">
.viewpoint {
  height: 50rpx;
  width: 100%;
  background-image: linear-gradient(to right, #cfe1ee, #eadaec);
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  position: relative;
  .title {
    color: #000;
    font-size: 14rpx;
    font-weight: bold;
  }
  .info {
    height: 100%;
    display: flex;
    align-items: center;
    .avatar {
      height: 20rpx;
      width: 20rpx;
      border-radius: 20rpx;
      overflow: hidden;
    }
    .name {
      flex: 1;
      font-size: 12rpx;
      font-weight: bold;
      margin-left: 10rpx;
    }
  }
}
.popup-content {
  height: 300rpx;
  width: 400rpx;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 20rpx 40rpx;
  .Y {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .form-button {
    font-size: 16rpx;
    height: 35rpx;
    border-radius: 10rpx;
    line-height: 35rpx;

    color: #fff;
    text-align: center;
    background-color: #2392ed;
    width: 100rpx;
    margin-top: 10rpx;
  }
  .avatar {
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .img {
      height: 50rpx;
      width: 50rpx;
    }
  }
  .item {
    height: 40rpx;
    width: 100%;
    display: flex;
    font-size: 16rpx;
    text-align: center;
    line-height: 40rpx;
    margin-top: 10rpx;
    .label {
      margin: 0 10rpx;
    }
    .input {
      text-align: left;
      border-bottom: 1rpx solid #ccc;
      flex: 1;
      color: #aca8a8;
      input {
        height: 100%;
        font-size: 16rpx;
      }
    }
  }
}
</style>
